<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script>
        //变速运动
        let timer = null;

        window.onload = function () {
            let oDiv = document.getElementById('div1');
            let oBtn = document.getElementById('btn1');

            oBtn.onclick = function() {
                clearInterval(timer);
                setInterval(function () {
                    if (oDiv.offsetLeft<600){
                        //与匀速的代码一样,但是每次的speed会变
                        let speed = Math.ceil((600 - oDiv.offsetLeft)/20);  //让每次的速度发生变化,并且向上取整(否则会无限接近700但是又到达不了)
                        //如果遇到从右往左移动时又需要向下取整,因为speed是负数,可以使用三元

                        oDiv.style.left = oDiv.offsetLeft + speed + 'px';
                        document.title = oDiv.offsetLeft+' , '+speed;
                    } else {
                        clearInterval(timer);
                        oDiv.style.left = 600 + 'px';
                    }
                },30);
            }
        }

    </script>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: brown;
            left: 0px;
            top: 50px;
            position: absolute;
        }
        #div2 {
            width: 2px;
            height: 300px;
            background: #000;
            position: absolute;
            top: 20px;
            left: 700px;
        }
    </style>
</head>

<body>

<div>
    <div>
        <input type = "button" value="move" id="btn1">
        <div id="div1"></div>
        <div id="div2"></div>
    </div>

</div>

</body>
</html>